<template>
    <div class="index">
        <Header redirect="monitor"></Header>
        <div class="main">
            <p class="current-nav">
                当前位置 :
                <router-link to="index">首页</router-link>
                <i> > </i>应急预案检测
            </p>
            <div class="monitor-main">
                <div class="monitor-content">
                    <!-- <div class="asTitle">
                        <h3>应急预案检测</h3>
                    </div> -->
                    <dl class="hint-section">
                        <dt>温馨提示</dt>
                        <dd>
                            (1)请按照综合预案、专项预案、现场处置方案分别上传
                            <span class="red">word版</span>应急预案
                        </dd>
                        <dd>
                            (2)若有多个专项预案或现场处置方案，请分别
                            <span class="red">上传单个预案</span>
                        </dd>
                        <dd>(3)检测过程需要一定时间，请您耐心等待</dd>
                    </dl>
                    <div class="table-header clearfix">
                        <div class="opts clearfix">
                            <el-upload
                                action="/emergency/v1.0/plan/checked"
                                :http-request="uploadFile"
                                :data="{ planType: 1 }"
                                :show-file-list="false"
                                accept=".doc,.docx"
                            >
                                <el-button
                                    class="grp1"
                                    :loading="uploadFile1Loading"
                                >
                                    <i class="el-icon-upload2">上传综合预案</i>
                                </el-button>
                            </el-upload>
                            <el-upload
                                action="/emergency/v1.0/plan/checked"
                                :http-request="uploadFile"
                                :show-file-list="false"
                                :data="{ planType: 2 }"
                                accept=".doc,.docx"
                            >
                                <el-button
                                    class="grp1"
                                    :loading="uploadFile2Loading"
                                >
                                    <i class="el-icon-upload2">上传专项预案</i>
                                </el-button>
                            </el-upload>
                            <el-upload
                                action="/emergency/v1.0/plan/checked"
                                :http-request="uploadFile"
                                :show-file-list="false"
                                :data="{ planType: 3 }"
                                accept=".doc,.docx"
                            >
                                <el-button
                                    class="grp1"
                                    :loading="uploadFile3Loading"
                                >
                                    <i class="el-icon-upload2"
                                        >上传现场处置方案</i
                                    >
                                </el-button>
                            </el-upload>
                        </div>
                        <!-- <p>预案汇编综合得分：
                            <strong>63.5</strong>分</p> -->
                    </div>
                    <h3 class="table-title">综合得分</h3>
                    <div class="table-wrap mb50">
                        <el-table
                            ref="multipleTable"
                            :data="scoreArr"
                            tooltip-effect="dark"
                            v-loading.lock="loadings"
                            element-loading-spinner="el-icon-loading"
                        >
                            <el-table-column
                                type="index"
                                align="center"
                                label="序号"
                                width="50"
                            >
                            </el-table-column>
                            <el-table-column
                                label="综合预案综合得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red:
                                                scope.row['综合预案综合得分'] <
                                                60
                                        }"
                                        >{{
                                            scope.row["综合预案综合得分"]
                                                ? scope.row["综合预案综合得分"]
                                                : 0
                                        }}分</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="专项预案综合得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red:
                                                scope.row['专项预案综合得分'] <
                                                60
                                        }"
                                        >{{
                                            scope.row["专项预案综合得分"]
                                                ? scope.row["专项预案综合得分"]
                                                : 0
                                        }}分</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="现场处置方案综合得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red:
                                                scope.row[
                                                    '现场处置预案综合得分'
                                                ] < 60
                                        }"
                                        >{{
                                            scope.row["现场处置预案综合得分"]
                                                ? scope.row[
                                                      "现场处置预案综合得分"
                                                  ]
                                                : 0
                                        }}分</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="预案汇编综合得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red:
                                                scope.row['预案汇编综合得分'] <
                                                60
                                        }"
                                        >{{
                                            scope.row["预案汇编综合得分"]
                                                ? scope.row["预案汇编综合得分"]
                                                : 0
                                        }}分</span
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <h3 class="table-title">得分详情</h3>
                    <div class="table-wrap">
                        <el-table
                            ref="multipleTable"
                            :data="planList"
                            tooltip-effect="dark"
                            v-loading.lock="loadings"
                            element-loading-spinner="el-icon-loading"
                        >
                            <el-table-column
                                type="index"
                                align="center"
                                label="序号"
                                width="50"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="planName"
                                label="预案名称"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                label="预案类别"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{
                                        scope.row.planType == 1
                                            ? "综合预案"
                                            : scope.row.planType == 2
                                            ? "专项预案"
                                            : "现场处置方案"
                                    }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="checkReportName"
                                label="预案检测报告"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                label="结构得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red: scope.row.structureScore < 60
                                        }"
                                        >{{ scope.row.structureScore }}分</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="内容得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red: scope.row.contentScore < 60
                                        }"
                                        >{{ scope.row.contentScore }}分</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="单个预案得分"
                                :show-overflow-tooltip="true"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span
                                        :class="{
                                            red: scope.row.totalScore < 60
                                        }"
                                        >{{ scope.row.totalScore }}分</span
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="操作"
                                align="center"
                                width="330"
                            >
                                <template slot-scope="scope">
                                    <div class="div-edit">
                                        <el-button
                                            class="newleft detail-btn"
                                            @click="lookPlan(scope.row)"
                                        >
                                            <i class="el-icon-search"></i
                                            >查看</el-button
                                        >
                                        <el-button
                                            class="newright detail-btn"
                                            @click="exportPlan(scope.row)"
                                        >
                                            <i class="el-icon-upload2"></i>
                                            导出
                                        </el-button>
                                        <el-button
                                            class="newright detail-btn"
                                            @click="deletePlan(scope.row)"
                                        >
                                            <i class="el-icon-delete"></i>
                                            删除
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="page-container">
                        <el-pagination
                            @current-change="getList"
                            :current-page.sync="pageIndex"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="total"
                        ></el-pagination>
                        <el-button>确定</el-button>
                    </div>
                </div>
            </div>
        </div>
        <Footer> </Footer>
    </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
export default {
    name: 'monitor',
    components: {
        Header,
        Footer
    },
    data () {
        return {
            loadings: false,
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            planList: [],
            uploadFile1Loading: false,
            uploadFile2Loading: false,
            uploadFile3Loading: false,
            scoreArr: [],
            userAccount: ''
        };
    },
    created () {
        this.userAccount = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).userAccount : ''
        this.getScore()
        this.getList()
    },
    methods: {
        uploadFile (file) {
            let url = `${this.$baseUrl}emergency/v1.0/plan/checked`
            var fd = new FormData();
            fd.append("file", file.file);
            fd.append(
                "userId",
                JSON.parse(localStorage.getItem("user")).id
            );
            fd.append(
                "planName", this.splitFileName(file.file.name)
            );
            fd.append(
                "planType", file.data.planType
            );
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.wordmsg = "上传中";
            this[`uploadFile${file.data.planType}Loading`] = true;
            this.$axios.post(url, fd, config).then(res => {
                this[`uploadFile${file.data.planType}Loading`] = false;
                if (res.data.meta.success) {
                    this.$message({
                        message: "上传成功",
                        type: "success"
                    });
                    this.getScore()
                    this.getList()
                    this.getGradeList(file.data.planType)
                } else {
                    this.$message({
                        message: res.data.meta.message,
                        type: "error"
                    });
                }
            })
        },
        getGradeList (planType) {
            var fd = new FormData();
            fd.append("pMode", 'SaveFile');
            fd.append("Data", JSON.stringify({
                comid: this.userAccount,
                pid: this.$route.query.pid,
                planType: planType
            }));
            this.$axios.post(`${this.$baseUrl4}ehtms_dl/api/index.ashx`, fd).then(res => {
            })
        },
        getScore () {
            let url = `${this.$baseUrl}emergency/v1.0/plan/avg/score/${JSON.parse(localStorage.getItem("user")).id}`
            this.$axios.get(url).then(res => {
                if (res.data.meta.code == 200) {
                    this.scoreArr = []
                    if (res.data.data.length > 0) {
                        this.scoreArr[0] = {}
                        res.data.data.forEach(item => {
                            this.scoreArr[0][item.planType] = item.score
                        });
                    }
                } else {
                    this.scoreArr = []
                    if (res.data.meta.message !== '暂无数据') {
                        this.$message({
                            message: res.data.meta.message,
                            type: "error"
                        });
                    }
                }
            })
        },
        getList () {
            let params = {
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "userId": JSON.parse(localStorage.getItem("user")).id
            }
            let url = `${this.$baseUrl}emergency/v1.0/plan/score/list`
            this.$axios.post(url, params).then(res => {
                if (res.data.meta.code == 200) {
                    this.planList = res.data.data.records
                    this.total = res.data.data.total
                } else {
                    this.planList = []
                    this.total = 0
                    if (res.data.meta.message !== '暂无数据') {
                        this.$message({
                            message: res.data.meta.message,
                            type: "error"
                        });
                    }
                }
            })
        },
        lookPlan (item) {
            let url = `${this.$baseUrl}emergency/v1.0/plan/score/info/${item.id}/${item.planType}`
            this.$axios.get(url).then(res => {
                if (res.data.meta.code == 200) {
                    window.open(res.data.data)
                } else {
                    this.$message({
                        message: res.data.meta.message,
                        type: "error"
                    });
                }
            })
        },
        exportPlan (item) {
            let url = `${this.$baseUrl}emergency/v1.0/plan/score/download/${item.id}/${item.planType}`
            this.$axios.get(url).then(res => {
                if (res.data.meta.code == 200) {
                    this.download(res.data.data)
                } else {
                    this.$message({
                        message: res.data.meta.message,
                        type: "error"
                    });
                }
            })
        },
        deletePlan (item) {
            let url = `${this.$baseUrl}emergency/v1.0/plan/score/delete/${item.id}`
            this.$axios.get(url).then(res => {
                if (res.data.meta.code == 200) {
                    this.$message({
                        message: '删除成功',
                        type: "error"
                    });
                    this.getScore()
                    this.getList()
                    this.deleteFile(item.id)
                } else {
                    this.$message({
                        message: res.data.meta.message,
                        type: "error"
                    });
                }
            })
        },
        deleteFile (id) {
            var fd = new FormData();
            fd.append("pMode", 'DeleteFile');
            fd.append("Data", JSON.stringify({
                id: id,
                comaccount: this.userAccount
            }));
            this.$axios.post(`${this.$baseUrl4}ehtms_dl/api/index.ashx`, fd).then(res => {
            })
        },
        download (blobUrl, name) {
            const a = document.createElement('a');
            a.style.display = 'none';
            a.download = name;
            a.href = blobUrl;
            a.click();
        },
        splitFileName (text) {
            var pattern = /\.{1}[a-z]{1,}$/;
            if (pattern.exec(text) !== null) {
                return (text.slice(0, pattern.exec(text).index));
            } else {
                return text;
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.current-nav {
    float: none;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    color: #939393;
    font-size: 14px;
    background: #f3f3f3;
}
.monitor-main {
    padding: 0 30px;
}
.monitor-content {
    background: #fff;
}
.asTitle {
    margin-bottom: 50px;
}
.asTitle h3 {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    padding: 20px 0 0 20px;
}
.hint-section {
    padding-left: 30px;
    margin-bottom: 52px;
    padding-top: 20px;
}
.hint-section dt {
    width: 102px;
    height: 36px;
    line-height: 36px;
    background: url(../../../static/images/hint.png) no-repeat 12px center;
    background-size: 18px 18px;
    background-color: #f6f9ff;
    padding-left: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e83fc;
    margin-bottom: 15px;
}
.hint-section dd {
    line-height: 30px;
    padding-left: 10px;
    color: #656565;
    font-size: 14px;
}
.table-header {
    padding: 0 30px;
}
.table-header .opts {
    float: left;
    margin-bottom: 30px;
}
.table-header .opts button {
    background: #f6f9ff;
    border: none;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e83fc;
    padding: 0 10px;
    margin-right: 10px;
}
.table-header button i {
    margin-right: 4px;
}
.table-header p {
    float: right;
    line-height: 36px;
    color: #686868;
    font-size: 12px;
}
.table-header p strong {
    color: #4482fb;
    font-size: 18px;
}
.table-wrap {
    padding: 0 30px;
}
.table-wrap .el-table {
    width: 100%;
    border-top: 1px solid #ebeef5;
}
.page-container {
    padding: 28px 0;
    width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.page-container .el-pagination {
    float: right;
}
.page-container .el-button {
    float: right;
    background: #edf4fe;
    width: 50px;
    padding: 0;
    height: 28px !important;
    margin: 4px 10px auto;
    color: #7fa4fc;
    border: 0;
}
.table-wrap table button {
    width: 80px;
    height: 36px;
    background-color: #f6f9ff;
    border: none;
    font-size: 14px;
    color: #3e83fc;
    text-align: center;
}
.red {
    color: #ff0507;
}
.mb50 {
    margin-bottom: 40px;
}
.table-title {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    line-height: 50px;
    margin-left: 20px;
}

</style>
<style>
  .detail-btn {
    color: #4180ff !important;
    background: #f6f9ff !important;
    border: none !important;
    border-radius: 8px !important;
    border: 1px solid #4180ff !important;
  }
.table-header .opts > div {
    float: left;
}
.table-wrap th .cell {
    color: #333333;
}
.table-wrap td .cell {
    color: #676767;
}
</style>


